import React, { useState, useEffect } from 'react'
import { Button, Modal, Grid, Col, Row, Input, Checkbox, Select, Divider, Table,Switch,Drawer } from 'antd'
import lou from '../../assets/css/louyu.module.css'
import axios from 'axios';
export default function Space() {
  // 设置对话框的显隐布尔值
  let [bol, setBol] = useState(false)
  let [aa, setAa] = useState(false)
  let [bb, setBb] = useState(false)
  let [kongName, setKongName] = useState('')
  let [louceng, setLouceng] = useState('')
  let [chaoxiang, setChaoxiang] = useState('')
  let [zhuangxiu, setZhuangxiu] = useState('')
  let [ly, setLy] = useState('')
  let [lc, setLc] = useState('')
  let [cc,setCc] = useState(false)
  let [area,setArea] =useState('') //新增面积状态
  let [remark,setRemark] =useState(false) //新增备注状态
  let [wu,setWu]=useState([])
  let [open1,setOpen1] =useState(false)
  const onChange = (e) => {
    console.log(`checked = ${e.target.checked}`);
  };
  const handleChange = (value) => {
    console.log(`selected ${value}`);
    setKongName(value)

  };
  const handChange = (value) => {
    console.log(`selected ${value}`);
    setLouceng(value)

  };
  const hand = (value) => {
    console.log(`selected ${value}`);
    setChaoxiang(value)

  };
  const text = (value) => {
    console.log(`selected ${value}`);
    setZhuangxiu(value)

  };
  const selelou = (value) => {
    console.log(`selected ${value}`);
    setLy(value)

  };
  const seleceng = (value) => {
    console.log(`selected ${value}`);
    setLc(value)

  };
  const MyComponent=()=>{
    const [data,setData]=useState([])
    const saveSpace=()=>{
      const data ={
        name:kongName,
        floor:louceng,
        area:area,
        direction:chaoxiang,
        decorarion:zhuangxiu,
        remark:remark,
        buliding:kongName
      }
    }
    
  }


  let [dataSpace, setDataSpace] = useState([])
    
useEffect(()=>{
// 发送post请求
axios.get('/api/getSpace')
.then(res=>{
  console.log(res.data)
  setWu(res.data)
})
.catch(error=>{
  console.log(error);
  //请求失败后的操作
})
},[])
  const columns = [
    {
      title: '名称',
      dataIndex: 'id',
      key: 'name',
      align: 'center',
    },
   
    {
      title: '楼宇',
      dataIndex: 'kongjian',
      key: 'building',
      align: 'center',
    },
    {
      title: '楼层',
      dataIndex: 'level',
      align: 'center',
      key: 'floor'
    },
    {
      title: '面积',
      dataIndex: 'V2',
      align: 'center',
      key: 'area'
    },
    {
      title: '装修',
      dataIndex: 'zx',
      align: 'center',
      key: 'decoration'
    },
    {
      title: '朝向',
      dataIndex: 'cx',
      align: 'center',
      key: 'orientation'
    },
    {
      title: '状态',
      dataIndex: 'zzstatus',
      align: 'center',
      key: 'status',
      render: (_, row) => {
        console.log(row);
        const checkedChildren = row.zt ? "上架中" : "";
        const unCheckedChildren = row.zt ? "" : "已下架";
        return (

          <Switch  checkedChildren={checkedChildren} unCheckedChildren={unCheckedChildren} checked={row.zt} />
        )
        
      }
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (item, row) => {
        return (
          <div>
            <Button onClick={()=>{
              setOpen1(true)
            }}>编辑</Button>
            <Button onClick={()=>{
              let id = row.id
              console.log(id);
              let newWu=wu.filter(item=>item.id!==id)
              setWu(newWu)
              // axios.get('/del',{
              //   params:{
              //     id:id
              //   }
              // }).then(res=>{
              //   console.log(res.data);
                
              //   setWu(res.data)
              // })
            }}>删除</Button>
          </div>
        )
      }
    }
  ];
  return (
    <>
      <Button className={lou.space} onClick={() => {
        setBol(true)
      }}>新建空间</Button>

      {/* 没有数据显示页面 */}
      {cc ?
        <div className={lou.kong}>
          <img src="https://www.helloimg.com/i/2024/11/27/6746e2c723d92.png" alt="" />
          <p>项目下未创建空间~</p>
        </div>
        :

        <div>
          <div className={lou.have}>
            <div className={lou.hatop}>
              <Select
                placeholder='请选择楼宇'
                showSearch
                style={{
                  width: 210,
                }}
                onChange={selelou}
                options={[
                  {
                    value: '国贸一期A座',
                    label: '国贸一期A座',
                  },
                  {
                    value: '国贸一期B座',
                    label: '国贸一期B座',
                  },
                  {
                    value: '国贸商城二期A座',
                    label: '国贸商城二期A座',
                  },
                  {
                    value: '国贸商城二期B座',
                    label: '国贸商城二期B座',
                  },

                ]}
                value={ly}
                className={lou.ly}
              />
              <Select
                placeholder='请选择楼层'
                showSearch
                style={{
                  width: 120,
                }}
                onChange={seleceng}
                options={[
                  {
                    value: '1层',
                    label: '1层',
                  },
                  {
                    value: '2层',
                    label: '2层',
                  },
                  {
                    value: '3层',
                    label: '3层',
                  },
                  {
                    value: '4层',
                    label: '4层',
                  },
                  {
                    value: '5层',
                    label: '5层',
                  },
                  {
                    value: '6层',
                    label: '6层',
                  },
                  {
                    value: '7层',
                    label: '7层',
                  },

                ]}
                value={lc}

              />
              <Input placeholder='请输入空间名称' className={lou.hipt} />
            </div>
            {/* 分割线 */}
            <Divider>
              <div className={lou.diver}>
                <img src="https://www.helloimg.com/i/2024/11/28/67485b7192581.png" alt="" />
                <span className={lou.more}>更多筛选</span>
              </div>
            </Divider>

            <Button className={lou.haveSelect}>查询</Button>
            <Button className={lou.haveSet}>重置</Button>
          </div>
          <div className={lou.youdata}>
            <Table
              dataSource={wu}
              columns={columns}

              scroll={{
                scrollToFirstRowOnChange: true,
                y: 800,
              }} />;
          </div>
        </div>}

      <Modal
        title="新建空间"
        width={480}
        open={bol}
        centered:true
        onCancel={() => {
          setBol(false)
        }}
        onOk={() => {
          // 点击确定后的操作
          setBol(false)
        }}

        footer
      >
        <div className={lou.grid}>
          {/* 空间名称 */}
          <div className={lou.cont}>
            <span className={lou.ic}>*</span>
            <span className={lou.txt}>空间名称</span>
          </div>
          <Row className={lou.one}>
            <Col span={24}>
              <Input placeholder='请输入' className={lou.big} value={kongName} onChange={(e)=>setKongName(e.target.value)}/>
            </Col>
          </Row>
        </div>

        {/* 所属楼宇，所在楼层 */}
        <div className={lou.build}>
          <div className="b-left">
            <span className={lou.ic}>*</span>
            <span className={lou.txt}>所属楼宇</span>
            <Row className={lou.two}>
              <Col span={10}>
                <Select
                  defaultValue='a'
                  style={{
                    width: 206,
                  }}
                  onChange={handleChange}
                  options={[
                    {
                      value: '国贸一期A座',
                      label: '国贸一期A座',
                    },
                    {
                      value: '国贸一期B座',
                      label: '国贸一期B座',
                    },
                    {
                      value: '国贸商城二期A座',
                      label: '国贸商城二期A座',
                    },
                    {
                      value: '国贸商城二期B座',
                      label: '国贸商城二期B座',
                    },
                  ]}
                  value={kongName}
                  className={lou.ipt}
                />

              </Col>
            </Row>
          </div>
          <div className="b-right">
            <span className={lou.ic}>*</span>
            <span className={lou.txt}>所在楼层</span>
            <Row className={lou.two}>
              <Col span={10}>
                <Select

                  style={{
                    width: 206,
                  }}
                  onChange={handChange}
                  options={[
                    {
                      value: '1层',
                      label: '1层',
                    },
                    {
                      value: '2层',
                      label: '2层',
                    },
                    {
                      value: '3层',
                      label: '3层',
                    },
                    {
                      value: '4层',
                      label: '4层',
                    },
                    {
                      value: '5层',
                      label: '5层',
                    },
                    {
                      value: '6层',
                      label: '6层',
                    },
                    {
                      value: '7层',
                      label: '7层',
                    },
                  ]}
                  placeholder='请选择'
                  value={louceng}
                  className={lou.ipt}
                />
              </Col>
            </Row>
          </div>
        </div>

        {/* 面积 */}
        <div className={lou.squire}>
          <div className={lou.cont}>
            <span className={lou.ic}>*</span>
            <span className={lou.txt}>面积(<span>m<sup class="math-sup">2</sup></span>)</span>
          </div>
          <Row className={lou.one}>
            <Col span={24}>
              <Input placeholder='请输入' className={lou.big} />
            </Col>
          </Row>
        </div>

        {/* 装修朝向 */}
        <div className={lou.three}>
          <div className="b-left">
            <span className={lou.txt}>装修</span>
            <Row className={lou.two}>
              <Col span={10}>
                <Select
                  style={{
                    width: 206,
                  }}
                  onChange={text}
                  options={[
                    {
                      value: '精装',
                      label: '精装',
                    },
                    {
                      value: '毛坯',
                      label: '毛坯',
                    }

                  ]}
                  value={zhuangxiu}
                  className={lou.ipt}
                />
              </Col>
            </Row>
          </div>
          <div className="b-right">
            <span className={lou.txt}>朝向</span>
            <Row className={lou.two}>
              <Col span={10}>
                <Select
                  style={{
                    width: 206,
                  }}
                  onChange={hand}
                  options={[
                    {
                      value: '东',
                      label: '东',
                    },
                    {
                      value: '南',
                      label: '南',
                    },
                    {
                      value: '西',
                      label: '西',
                    },
                    {
                      value: '北',
                      label: '北',
                    }
                  ]}
                  value={chaoxiang}
                  className={lou.ipt}
                />
              </Col>
            </Row>
          </div>
        </div>

        {/* 空间备注 */}
        <div>
          <div className={lou.cont}>
            <span className={lou.txt}>空间备注</span>
          </div>
          <Row className={lou.kongjian}>
            <Col span={24}>
              <Input placeholder='600个字以内' className={lou.beizhu} value={remark} onChange={(e)=>{
                setRemark(e.target.value)
              }}/>
            </Col>
          </Row>
        </div>

        <Button className={lou.btn} onClick={() => {
          axios.post('')
          setBol(false)
          setAa(true)
        }}>保存</Button>
      </Modal>
      <Modal
        width={308}
        open={aa}
        centered:true
        onCancel={() => {
          setAa(false)
        }}
        footer
        className={lou.tan2}
      >
        <img src="https://www.helloimg.com/i/2024/11/28/67483a0f91435.png" alt="" />
        <p className={lou.p1}>{kongName}{louceng}空间创建成功</p>
        <p className={lou.p2} onClick={() => {
          setBol(false)
          setAa(false)
          setBb(true)
        }}>编辑单位租金&gt;</p>
      </Modal>
      <Modal
        title='空间单位租金'
        open={bb}
        centered:true
        onCancel={() => {
          setBb(false)
        }}
        footer
        className={lou.rent}
      >
        <div className={lou.nei}>
          <Input placeholder='输入租金数额' />
          <span>元/<span>m<sup class="math-sup">2</sup></span>.天</span>
        </div>

        <Checkbox onChange={onChange} className={lou.tax}>不含税</Checkbox>
        <Button className={lou.overtax} onClick={()=>{
          setBb(false)
        }}>保存</Button>
      </Modal>

      <Drawer
        title="北京国贸一期A座1层102"
        width={720}
        onClose={()=>setOpen1(false)}
        open={open1}
     
      >
       
      
      </Drawer>
    </>
  )
}
